<template>
  <el-dialog :title="title" :visible="visible" width="60%" append-to-body @close="handleCancel('editorForm')">
    <el-form
      ref="editorForm"
      class="grid column_2"
      :model="formState"
      :rules="rules"
      label-width="140px"
    >
      <el-form-item class="grid-item mr_unset" label="证件号码">
        <el-input v-model="formState.idNumber" placeholder="请输入证件号码" />
      </el-form-item>
      <el-form-item class="grid-item mr_unset" label="姓名">
        <el-input v-model="formState.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item class="grid-item mr_unset" label="性别">
        <el-select
          v-model="formState.gender"
          class="input-block"
          placeholder="请选择性别"
        >
          <el-option
            v-for="item in genders"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option
        ></el-select>
      </el-form-item>
      <el-form-item class="grid-item mr_unset" label="年龄">
        <el-input v-model="formState.age" placeholder="请输入年龄" />
      </el-form-item>
      <el-form-item class="grid-item mr_unset" label="现住完整详细地址">
        <el-input
          v-model="formState.address"
          placeholder="请输入现住完整详细地址"
        />
      </el-form-item>
      <el-form-item class="grid-item mr_unset" label="民族">
        <el-select
          v-model="formState.nation"
          class="input-block"
          placeholder="请选择民族"
        >
          <el-option
            v-for="item in nations"
            :key="item.id"
            :label="item.nation"
            :value="item.id"
          >
          </el-option
        ></el-select>
      </el-form-item>

      <el-form-item class="grid-item mr_unset" label="是否新增患者">
        <el-select
          v-model="formState.isAdded"
          class="input-block"
          placeholder="请选择是否新增患者"
        >
          <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option
        ></el-select>
      </el-form-item>
      <!-- <el-form-item class="grid-item mr_unset" label="省份">
        <el-select
          v-model="formState.province"
          class="input-block"
          placeholder="请选择省份"
        >
          <el-option
            v-for="item in divisions"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="grid-item mr_unset" label="城市">
        <el-select
          v-model="formState.city"
          class="input-block"
          placeholder="请选择城市"
        >
          <el-option
            v-for="item in cities.children || []"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="grid-item mr_unset" label="县城">
        <el-select
          v-model="formState.county"
          class="input-block"
          placeholder="请选择县城"
        >
          <el-option
            v-for="item in areas.children || []"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="grid-item mr_unset" label="乡镇（街道）">
        <el-select
          v-model="formState.town"
          class="input-block"
          placeholder="请选择乡镇（街道）"
        >
          <el-option
            v-for="item in streets.children || []"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item class="grid-item mr_unset" label="多人群分类">
        <el-select
          v-model="formState.audienceCategory"
          class="input-block"
          placeholder="请选择多人群分类"
        >
          <el-option
            v-for="item in types"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option
        ></el-select>
      </el-form-item>
      <el-form-item class="grid-item mr_unset" label="本人联系电话">
        <el-input
          v-model="formState.contactNumber"
          placeholder="请输入本人联系电话"
        />
      </el-form-item>
      <el-form-item class="grid-item mr_unset" label="学校">
        <el-input v-model="formState.school" placeholder="请输入学校" />
      </el-form-item>
      <el-form-item class="grid-item mr_unset" label="班级">
        <el-input v-model="formState.className" placeholder="请输入班级" />
      </el-form-item>
      <el-form-item class="grid-item mr_unset" label="寺庙名称">
        <el-input v-model="formState.templeName" placeholder="请输入寺庙名称" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit('editorForm')"
        >确 定</el-button
      >
      <el-button @click="handleCancel('editorForm')">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { scrub } from "@/filter/index";

export default {
  name: "Editor",
  props: {
    title: String,
    visible: Boolean,
    state: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      open: true,
      formState: {
        nickName: "",
        id: "",
        idNumber: "",
        isAdded: "",
        isUrgency: "",
        isFilter: "",
        name: "",
        region: "",
        gender: "",
        age: "",
        audienceCategory: "",
        nation: "",
        school: "",
        className: "",
        templeName: "",
        remark: "",
      },
      rules: {},
    };
  },
  methods: {
    handleSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit("submit", scrub(this.formState));
        }
      });
    },
    handleCancel(formName) {
      this.$refs[formName].resetFields();
      this.$emit("cancel");
    },
  },
  mounted() {
    this.formState = Object.assign({}, this.formState, this.state);
  },
};
</script>

<style lang="scss" scoped></style>
